<template>
  <div id='prediction'
       style="background-image: url('/static/background/background.png');padding: 10px;min-height: 89vh">
    <div class='title_row'>
      <div class='title_box'>
        <div class='title_box_text'>
          云际计算资源预测模块
        </div>
        <div class='title_box_hr'></div>
      </div>
    </div>
    <div class='title_row2'>
      <div class='title_box_text2'>
        数据将在{{ nextHour }} 时自动更新
      </div>
    </div>
    <el-row :span='24' style='margin-top: 15px'>
      <el-col :span='12' v-for='(itme, index) in dataInfo' :key='index'>
        <el-card>
          <div class='clearfix'>
            <el-row>
              <span style='margin-left: 15px'>{{ itme.cloudName }}</span>
              <el-button size='mini' style='margin-left: 75%;' type='primary' plain disabled>更新预测</el-button>
            </el-row>
            <el-row>
              <span style='margin-left: 15px'>下一小时的资源需求预测量</span>
              <el-table
                :data='itme.nextHoureInfo'
                :row-style="{height: '30px'}" :cell-style="{padding: '0'}"
                :header-row-style="{height: '40px'}" :header-cell-style="{padding: '0'}" border class='cloudTable'>
                <el-table-column
                  prop='memory'
                  label='内存(%)'>
                </el-table-column>
                <el-table-column
                  prop='gpu'
                  label='GPU(%)'>
                </el-table-column>
                <el-table-column
                  prop='cpu'
                  label='CPU(%)'>
                </el-table-column>
              </el-table>
            </el-row>
          </div>
          <div ref='chart' :id="'chart' + index" style='height: 30vh;margin-top: 5px;'></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script src='./js/index.js'>
</script>

<style lang='scss'>
@font-face {
  font-family: 'Alternate';
  font-style: normal;
  font-width: normal;
}

@import './css/prediction.scss';
</style>
